<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<title>JQuery Validation Engine</title>
	<link rel="stylesheet" href="../css/validationEngine.jquery.css" type="text/css" />
	<link rel="stylesheet" href="../css/template.css" type="text/css" />
	<script src="../js/jquery-1.6.min.js" type="text/javascript"></script>
	<script src="../js/jquery-1.8.2.min.js" type="text/javascript"></script>
	<script src="../js/languages/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
	<script>
		jQuery(document).ready(function(){
			// binds form submission and fields to the validation engine
			jQuery("#formID").validationEngine();
			jQuery('#formID').validationEngine('validate');
		});
	</script>
</head>
<body>
	<p>
		<a href="#" onclick="alert('is the form valid? '+jQuery('#formID').validationEngine('validate'))">Evaluate form</a>
		| <a href="../index.html" >Back to index</a>
	</p>
	<p>
		file input not included in tests, as it can only be set by the user<br />
		select does not have a placeholder attribute in html5, however a custom placeholder value can be defined with jquery data attribute<br />
		<br />
		ids to check:
		<li>b4b650107d6715de9804f6506f94c98894264230 - <span style="color:red">broken</span>
		<li>30092b1e57e277f22d0ffcb8bd768ffeb9eb02d6 - <span style="color:red">broken</span>
		<li>8c690f39fdc6cde2a30abe4a5098da48c1e2f7fb - <span style="color:red">broken</span>
		<li>70734226e588e662dc83b0e66aa91853a03f0c19 - <span style="color:red">broken</span>
		<li>7f6df30e7cffc680b725eb14f32af4e464cc539e - <span style="color:red">broken</span>
		<li>7c5b05527af47832468b9d6682266d11081fc24f - <span style="color:red">broken</span>
		<li>391b738156e23e05121199d7539746bf8f2c0f68 - <span style="color:red">broken</span>
		<li>a4649825cbfd996e76c37e8a0683de5f5362db0d - <span style="color:green">working</span>
	</p>
	<form id="formID" class="formular" method="post">
		
		<h1>none of the following should validate</h1>
		
		<fieldset>
			<legend>required + empty</legend>
            
			<legend>text</legend>
			<label>
				<input class="validate[required]" id="ereq1" type="text" />
			</label>
            
			<legend>password</legend>
			<label>
				<input class="validate[required]" id="ereq2" type="password" />
			</label>
            
			<legend>textarea</legend>
			<label>
				<input class="validate[required]" id="ereq3" type="textarea" />
			</label>
            
			<legend>select-one</legend>
			<label>
				<select class="validate[required]" id="ereq4">
					<option></option>
					<option>a</option>
				</select>
			</label>
            
			<legend>select-multiple</legend>
			<label>
				<select class="validate[required]" id="ereq5" multiple="multiple">
					<option></option>
					<option>a</option>
				</select>
			</label>
             
		</fieldset>
		
		<fieldset>
			<legend>required + whitespace</legend>
            
			<legend>text</legend>
			<label>
				<input class="validate[required]" id="wreq1" value="  " type="text" />
			</label>
            
			<legend>password</legend>
			<label>
				<input class="validate[required]" id="wreq2" value="  " type="password" />
			</label>
            
			<legend>textarea</legend>
			<label>
				<input class="validate[required]" id="wreq3" value="  " type="textarea" />
			</label>
            
			<legend>select-one</legend>
			<label>
				<select class="validate[required]" id="wreq4">
					<option>  </option>
					<option>a</option>
				</select>
			</label>
            
			<legend>select-multiple</legend>
			<label>
				<select class="validate[required]" id="wreq5" multiple="multiple">
					<option>  </option>
					<option>a</option>
				</select>
			</label>
            
		</fieldset>
		
		<fieldset>
			<legend>
				required + data-validation-placeholder
			</legend>
            
			<legend>text</legend>
			<label>
				<input class="validate[required]" id="dreq1" data-validation-placeholder="placeholder" value="placeholder" type="text" />
			</label>
            
			<legend>password</legend>
			<label>
				<input class="validate[required]" id="dreq2" data-validation-placeholder="placeholder" value="placeholder" type="password" />
			</label>
            
			<legend>textarea</legend>
			<label>
				<input class="validate[required]" id="dreq3" data-validation-placeholder="placeholder" value="placeholder" type="textarea" />
			</label>
            
			<legend>select-one</legend>
			<label>
				<select class="validate[required]" id="dreq4" data-validation-placeholder="placeholder" >
					<option>placeholder</option>
					<option>a</option>
				</select>
			</label>
            
			<legend>select-multiple</legend>
			<label>
				<select class="validate[required]" id="dreq5" data-validation-placeholder="placeholder" multiple="multiple">
					<option>placeholder</option>
					<option>a</option>
				</select>
			</label>
            
		</fieldset>
		
		<fieldset>
			<legend>required + data-validation-placeholder + partial whitespace</legend>
            
			<legend>text</legend>
			<label>
				<input class="validate[required]" id="dwreq1" data-validation-placeholder="placeholder" value=" placeholder" type="text" />
			</label>
            
			<legend>password</legend>
			<label>
				<input class="validate[required]" id="dwreq2" data-validation-placeholder="placeholder" value=" placeholder" type="password" />
			</label>
            
			<legend>textarea</legend>
			<label>
				<input class="validate[required]" id="dwreq3" data-validation-placeholder="placeholder" value=" placeholder" type="textarea" />
			</label>
            
			<legend>select-one</legend>
			<label>
				<select class="validate[required]" id="dwreq4" data-validation-placeholder="placeholder" >
					<option value="  placeholder">  placeholder</option>
					<option>a</option>
				</select>
			</label>
            
			<legend>select-multiple</legend>
			<label>
				<select class="validate[required]" id="dwreq5" data-validation-placeholder="placeholder" multiple="multiple">
					<option value="  placeholder">  placeholder</option>
					<option>a</option>
				</select>
			</label>
            
		</fieldset>
		
		<fieldset>
			<legend>
				required + placeholder
			</legend>
            
			<legend>text</legend>
			<label>
				<input class="validate[required]" id="preq1" placeholder="placeholder" type="text" />
			</label>
            
			<legend>password</legend>
			<label>
				<input class="validate[required]" id="preq2" placeholder="placeholder" type="password" />
			</label>
            
			<legend>textarea</legend>
			<label>
				<input class="validate[required]" id="preq3" placeholder="placeholder" type="textarea" />
			</label>
            
		</fieldset>
		
		<fieldset>
			<legend>
				required + placeholder + partial whitespace
			</legend>
            
			<legend>text</legend>
			<label>
				<input class="validate[required]" id="pwreq1" placeholder="placeholder" value=" placeholder" type="text" />
			</label>
            
			<legend>password</legend>
			<label>
				<input class="validate[required]" id="pwreq2" placeholder="placeholder" value=" placeholder" type="password" />
			</label>
            
			<legend>textarea</legend>
			<label>
				<input class="validate[required]" id="pwreq3" placeholder="placeholder" value=" placeholder" type="textarea" />
			</label>
            
		</fieldset>
		
		<h1>the following should all validate</h1>
		
		<fieldset>
			<legend>required + data-validation-placeholder + valid data</legend>
            
			<legend>text</legend>
			<label>
				<input class="validate[required]" id="dvreq1" data-validation-placeholder="placeholder" value="valid data" type="text" />
			</label>
            
			<legend>password</legend>
			<label>
				<input class="validate[required]" id="dvreq2" data-validation-placeholder="placeholder" value="valid data" type="password" />
			</label>
            
			<legend>textarea</legend>
			<label>
				<input class="validate[required]" id="dvreq3" data-validation-placeholder="placeholder" value="valid data" type="textarea" />
			</label>
            
			<legend>select-one</legend>
			<label>
				<select class="validate[required]" id="dvreq4" data-validation-placeholder="placeholder" >
					<option value="  placeholder">  placeholder</option>
					<option selected="selected">a</option>
				</select>
			</label>
            
			<legend>select-multiple</legend>
			<label>
				<select class="validate[required]" id="dvreq5" data-validation-placeholder="placeholder" multiple="multiple">
					<option value="  placeholder">  placeholder</option>
					<option selected="selected">a</option>
				</select>
			</label>
            
		</fieldset>
		
		<fieldset>
			<legend>
				required + placeholder + valid data
			</legend>
            
			<legend>text</legend>
			<label>
				<input class="validate[required]" id="pvreq1" placeholder="placeholder" value="valid data" type="text" />
			</label>
            
			<legend>password</legend>
			<label>
				<input class="validate[required]" id="pvreq2" placeholder="placeholder" value="valid data" type="password" />
			</label>
            
			<legend>textarea</legend>
			<label>
				<input class="validate[required]" id="pvreq3" placeholder="placeholder" value="valid data" type="textarea" />
			</label>
            
		</fieldset>

		<input class="submit" type="submit" value="Validate &amp; Send the form!"/><hr/>
	</form>
</body>
</html>
